import myAjax from '../static/myAjax.js'

window.onload = function () {
    loadInfo();
    document.getElementById('modify').onclick = function () {
        let phone = document.getElementById('phone').value;
        let password = document.getElementById('password').value;
        let studentId = document.getElementById('studentId').value;
        if (!phone || !password) {
            layer.open({
                title: '信息',
                content: '手机号和密码不可为空！'
            })
            return;
        }
        myAjax('/student/setStudent', 'POST', 'phone=' + phone + '&password=' + password + '&studentId=' + studentId)
            .then(
                res => {
                    if (res.code == 200) {
                        layer.open({
                            title: '信息',
                            content: res.msg
                        })
                        $('#modifyModal').modal('toggle');
                        loadInfo();
                    } else {
                        layer.open({
                            title: '信息',
                            content: res.msg
                        })
                    }
                }
            )
    }
}

function loadInfo() {
    myAjax('/student/info?' + Math.random(), 'GET')
        .then(
            res => {
                if (res.code == 200) {
                    let text = '';
                    for (let student of res.students) {
                        text += `<tr>
                                <td>${student.studentId}</td>
                                <td>${student.uname}</td>
                                <td>${student.realname}</td>
                                <td>${student.sex == 1 ? '男' : '女'}</td>
                                <td>
                                    <button type="button" class="btn btn-primary modify" data-student='`+ JSON.stringify(student) + `' data-toggle="modal" data-target="#modifyModal">修改</button>
                                    <button type="button" class="btn btn-primary comment" data-userId='${student.user_id}' data-toggle="modal" data-target="#commentModal">课程评论</button>
                                </td>
                            </tr>`;
                    }
                    document.getElementById('studentInfo').innerHTML = text;

                    document.querySelectorAll('.modify').forEach(
                        (remove, index) => {
                            remove.onclick = function () {
                                let student = JSON.parse(this.getAttribute('data-student'));
                                document.getElementById('phone').value = student.phone;
                                document.getElementById('password').value = student.password;
                                document.getElementById('studentId').value = student.studentId;
                            }
                        }
                    )
                    document.querySelectorAll('.comment').forEach(
                        (comment, index) => {
                            comment.onclick = function () {
                                let userId = JSON.parse(this.getAttribute('data-userId'));
                                loadCommentInfo(userId);
                            }
                        }
                    )
                }
            }
        )
}
function loadCommentInfo(userId) {
    myAjax('/student/commentInfo', 'POST', 'userId=' + userId)
        .then(
            res => {
                let commentText = '';
                for (let comment of res.comments) {
                    commentText += `<tr>
                            <td>${comment.ctitle}</td>
                            <td>${comment.content}</td>
                            <td>${comment.time}</td>
                            <td>
                                <button type="button" class="btn btn-danger removeComment" data-commentId="${comment.course_comment_id}" >删除</button>
                            </td>
                        </tr>`;
                }
                document.getElementById('studentCommentInfo').innerHTML = commentText;

                document.querySelectorAll('.removeComment').forEach(
                    (remove, index) => {
                        remove.onclick = function () {
                            var msg = "您真的确定要删除吗？\n\n请确认！";
                            if (confirm(msg) == true) {
                                let commentId = JSON.parse(this.getAttribute('data-commentId'));
                                myAjax('/student/removeComment', 'POST', 'commentId=' + commentId)
                                    .then(
                                        res => {
                                            if (res.code == 200) {
                                                layer.open({
                                                    title: '信息',
                                                    content: res.msg
                                                })
                                                loadCommentInfo(userId);
                                            }
                                        }
                                    )
                            }
                        }
                    }
                )    
            }
        )
}
